<template>
	<view class="">
		<view class="info">
			<view class="info-item">
				<text class="info-label">学号</text>
				<text class="info-value">{{ taskInfo.stu.userCode}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">姓名</text>
				<text class="info-value">{{ taskInfo.stu.userName}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">课题</text>
				<text class="info-value">{{ taskInfo.taskName}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">描述</text>
				<text class="info-value">{{ taskInfo.taskDesc}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">开题报告</text>
				<image :src="'http://localhost:8081' + taskInfo.taskReport" style="width: 100rpx;height: 100rpx;"
					@click="handlePreview(taskInfo.taskReport)" />
			</view>
			<view class="info-item">
				<text class="info-label">手机号</text>
				<text class="info-value">{{ taskInfo.stu.userMobile}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">导师</text>
				<text class="info-value">{{ taskInfo.stu.tchName}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">审核状态</text>
				<text class="info-value">{{ parseStatus(taskInfo.status) }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">申请日期</text>
				<text class="info-value">{{ taskInfo.createTime.replace('T', ' ')}}</text>
			</view>
		</view>
		<view class="process" v-if="userInfo.roleId === 2">
			<view class="title">
				<text>审核流程</text>
			</view>
			<u-steps :current="stepsInfo.length - 1" direction="column"
				style="display: flex;justify-content: center;margin-left: 30%;margin-top: 20rpx;">
				<u-steps-item v-for="(item,index) in stepList" :key="index" :error="item.status === 0"
					:title="item.stepName">
					<view slot="desc" style="display: flex;flex-direction: column;color: #92969B;font-size: 24rpx;"
						inactiveColor="#92969B">
						<text v-if="index !== 0 && item.status">{{item.status === 1 ? '通过' : '驳回 '}}</text>
						<text v-if="item.operateName">审核人：{{ item.operateName }}</text>
						<text v-if="index !== 0 && item.stepDesc">审核意见：{{ item.stepDesc }}</text>
						<text v-if="item.createTime">{{ item.createTime.replace('T', ' ') }}</text>
					</view>
				</u-steps-item>
			</u-steps>
		</view>
		<view class="approval" v-if="userInfo.roleId === 1 && taskInfo.status === 1">
			<view class="title">
				<text>审核操作</text>
			</view>
			<u--form labelPosition="left" :model="formModel" ref="uForm">
				<u-form-item label="审核意见" label-width="70">
					<u--textarea v-model="formModel.stepDesc" placeholder="请输入意见" ></u--textarea>
				</u-form-item>
			</u--form>
			<view style="display: flex;margin-top: 20rpx;">
				<u-button type="primary" style="width: 45%;" @click="handleSubmit(1)">通过</u-button>
				<u-button type="error" style="width: 45%;" @click="handleSubmit(0)">驳回</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		approvalTaskService,
		taskDetailService,
		taskStepsService
	} from '../../api/task';
	export default {
		data() {
			return {
				taskInfo: {},
				stepsInfo: [],
				stepList: [{
						stepName: '提交申请'
					},
					{
						stepName: '导师审核'
					},
					{
						stepName: '监管人员审核'
					},
					{
						stepName: '结束'
					}
				],
				userInfo: uni.getStorageSync('user-profile'),
				formModel: {
					stepDesc: '',
					taskId: null,
					status: null
				}
			};
		},
		onLoad(option) {
			this.getInfo(option.id)
			this.getSteps(option.id)
			this.formModel.taskId = option.id
		},
		methods: {
			async getInfo(taskId) {
				this.taskInfo = await taskDetailService(taskId)
				console.log(this.taskInfo)
			},
			handlePreview(url) {
				const imageUrl = 'http://localhost:8081' + url
				uni.previewImage({
					urls: [imageUrl]
				})
			},
			parseStatus(status) {
				if (status === 1) {
					return '待指导老师审核'
				} else if (status === 2) {
					return '待监管人员通过'
				} else if (status === 3) {
					return '驳回'
				} else {
					return '通过'
				}
			},
			async getSteps(taskId) {
				this.stepsInfo = await taskStepsService(taskId)
				this.stepsInfo.forEach((item, index) => {
					this.stepList[index] = item
				})
			},
			async handleSubmit(status) {
				this.formModel.status = status
				await approvalTaskService(this.formModel)
				uni.showToast({
					icon:'success',
					title:'审批成功'
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;

		.info {
			background-color: #ffffff;
			margin-top: 40rpx;
			border-top: 1px solid #e0e0e0;
			font-size: 26rpx;

			.info-item {
				background-color: #ffffff;
				padding: 20rpx;
				display: flex;

				// align-items: center;
				.info-label {
					display: block;
					width: 120rpx;
					color: #92969B;
				}

				.info-value {
					color: #1F2228;
					font-weight: 500;
					flex: 1;
				}
			}
		}

		.process {
			background-color: #ffffff;
			margin-top: 40rpx;
			padding: 20rpx;
			font-weight: 545;

			.title {
				border-bottom: 1px solid #e0e0e0;
				padding: 20rpx;
			}

			text {
				line-height: 40rpx;
			}
		}

		.approval {
			background-color: #ffffff;
			margin-top: 40rpx;
			padding: 20px;
			.title {
				border-bottom: 1px solid #e0e0e0;
				padding: 20rpx;
			}
		}
	}
</style>